import React, {useEffect, useState} from 'react';
import {Pie} from "@ant-design/charts";
import {message} from "antd";
import {listInterfaceInfoVoByPageUsingPost} from "@/services/yuanapi_backed/interfaceInfoController";

const InterfaceCharts = () => {
  const [listData,setListData]=useState<API.InterfaceInfoVO[]>([])
  const [loading,setLoading] = useState<boolean>(true)

  // 获取接口列表
  const getListData = async ()=>{
    try {
      const res = await listInterfaceInfoVoByPageUsingPost({
        status: 0,
        pageSize: "10",
      })
      if (res.code === 0){
        // @ts-ignore
        setListData(res.data.records)
        setLoading(false)
      }
    }catch (e:any){
      message.error(e.message)
    }
  }
  useEffect(() => {
    getListData()
  }, []);
  const data = listData.map((item)=>{
    return {type:item.interfaceName,value:item.calledNum}
  })

  // console.log(data)
  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {

      text: (d:any) => `${d.type}\n ${d.value}`,
      position: 'spider',
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },

  };
  return (
    <div>
      <Pie {...config} loading={loading}/>
    </div>
  );
};

export default InterfaceCharts;
